<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Launch ...</title>
    <style type="text/css">
      html,
      body,
      .launch-box {
        height: 100%;
        overflow: hidden;
      }
      * {
        margin: 0;
      }
      .shadow-box {
        margin: 10px;
        height: calc(100% - 20px);
        background-color: white;
        box-shadow: 0 0 10px rgba(75, 75, 75, 0.2);
        overflow: hidden;
        position: relative;
      }
      .logo {
        width: 180px;
        margin: 10px;
      }
      .writer {
        width: 240px;
        position: absolute;
        top: 0px;
        right: 0px;
      }
      .words {
        font-size: 16px;
        font-weight: 400;
        line-height: 17px;
        color: #878787;
        width: 250px;
        margin: 40px 20px;
      }
      .launching {
        font-size: 19px;
        font-weight: 600;
        line-height: 32px;
        color: #000000;
        margin-left: 10px;
        margin-bottom: 5px;
      }
      .progress-container {
        position: absolute;
        bottom: 20px;
        left: 0px;
      }
      .progress {
        font-size: 17px;
        font-weight: 500;
        line-height: 29px;
        color: #878787;
        opacity: 1;
        float: right;
        margin-bottom: 5px;
      }
      .progress-bar {
        width: 255px;
        height: 0px;
        border-bottom: 4px solid #eaeaea;
        opacity: 1;
      }
      .progress-line {
        width: 172px;
        height: 0px;
        border-bottom: 4px solid #000000;
        opacity: 1;
        position: relative;
        bottom: 4px;
      }
    </style>
  </head>
  <body>
    <div class="launch-box">
      <div class="shadow-box">
        <img src="splash.png" alt="" class="logo" />
        <p class="words"></p>
        <div class="progress-container">
          <span class="launching">启动中</span>
          <span class="progress"></span>
          <div class="progress-bar"></div>
          <div class="progress-line"></div>
        </div>
        <img src="writer.jpg" alt="" class="writer" />
      </div>
    </div>
    <script>
      let words = [
        "人类一向有这个独特之处：它保留了两套法则——一套私下的，一套真正的；一套公开的，一套矫揉造作的。",
        "人类中绝大多数人，不论是野蛮的或是文明的，在暗地里都是心地善良和畏畏缩缩地不敢叫人受苦的人，可是当着一小撮专事侵略和残酷无情的人面前，他们就不敢固执己见。",
        "如果你照顾一只肚子饿的狗，给它食物，让它过好日子，这只狗绝对不会反咬你一口，这就是狗与人类最主要的不同。",
        "跳舞，像没有人看着那样；热恋，像从未受伤一样；唱歌，像无人听着那样；活着，就把人间当天堂。",
        "这些贵妇仿佛一大片花海，五光十色，灿烂耀眼，她们身上的钻石熠熠生辉，连成一片，仿佛天上的银河。",
        "永远要像你不需要金钱那样地工作，永远要像你不曾被伤害过那样地爱，永远要像没有人在注视你那样地跳舞，永远要像在天堂那样地生活。",
      ];
      let number = Math.floor(Math.random() * words.length);
      let word = words[number];
      document.querySelector(".words").innerHTML = word;
      let progressNum = document.querySelector(".progress");
      let progressLine = document.querySelector(".progress-line");
      let progress = 0;
      let timer = setInterval(() => {
        progress++;
        progressNum.innerHTML = progress + "%";
        progressLine.style.width = (255 * progress) / 100 + "px";
        if (progress > 99) {
          clearInterval(timer);
        }
      }, 20);
    </script>
  </body>
</html>
